import { Select } from "antd";
import { useEffect, useState } from "react";
import { useModel } from "umi";
const AppSelect = ({ onChange }: any) => {
  const { appList } = useModel("appList");
  const [options, setOptions] = useState<any>([]);
  useEffect(() => {
    let options: any = [];
    appList.forEach((element) => {
      let imgBase64 = "data:image/png;base64," + element[0];
      options.push({
        value: element[2],
        label: (
          <div>
            <img src={imgBase64} width="20px" height="20px"></img>
            <span style={{ marginLeft: 5 }}>{element[1]}</span>
          </div>
        ),
      });
    });
    setOptions(options);
  }, [appList]);

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    onChange?.(value)
  };

  return (
    <Select
      style={{ width: 300 }}
      onChange={handleChange}
      options={options}
      mode="multiple"
    />
  );
};

export default AppSelect;
